<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="教师名">
              <span>{{ props.row.teacherName }}</span>
            </el-form-item>
            <el-form-item label="作业名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="截止日期">
              <span>{{ props.row.deadline }}</span>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="content">
              <span>{{ props.row.content }}</span>
            </el-form-item>
            <el-table-column>
              <el-button type="text" @click="getDetail(props.row.id)">查看详情</el-button>
            </el-table-column>
            <el-table-column>
              <el-button type="text" @click="uploadWork(props.row.id)">提交作业</el-button>
            </el-table-column>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="教师名"
        prop="teacherName">
      </el-table-column>
      <el-table-column
        label="作业名"
        prop="name">
      </el-table-column>
      <el-table-column
        label="截止日期"
        prop="deadline">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog
      title="上传文件"
      :close-on-click-modal="false"
      @close="closeHandle"
      :visible.sync="visible">
      <el-upload
        drag
        :action="url"
        :before-upload="beforeUploadHandle"
        :on-success="successHandle"
        multiple
        :file-list="fileList"
        style="text-align: center;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">文件命名格式为（姓名_班级_作业标题）将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只支持word文档！</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      visible: false,
      url: 'http://127.0.0.1:8091/check/StuUploadWord',
      fileList: [],
      workId: 0,
      classname: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: [],
      classId: 0,
      stuWorkName: ""
    }
  },
  created () {
    this.getWork()
  },
  methods: {
    getWork () {
      axios.get('http://127.0.0.1:8091/admin/getClassId/' + this.$store.state.user.name).then(({data}) => {
        this.classId = data && data.errCode === 0 ? data.info : 0
      }).then(() => {
        let jsonObj = {'classId': this.classId, 'page': this.pageIndex, 'limit': this.pageSize}
        axios.post('http://127.0.0.1:8091/work/findWork/', jsonObj).then(({data}) => {
          this.tableData = data && data.errCode === 0 ? data.info : []
          this.totalPage = data && data.errCode === 0 ? data.total : 0
          this.dataListLoading = false
        })
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getWork()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getWork()
    },
    getDetail (id) {
      this.workId = id
      this.$router.push({name: 'detail', query: {workId: this.workId}})
    },
    // 上传之前
    beforeUploadHandle (file) {
      // debugger
      if (!file.name.search('.doc') || !file.name.search('.docx')) {
        this.$message.error('只支持word文档！')
        return false
      }
      this.stuWorkName = file.name
    },

    // 上传成功
    successHandle (response, file, fileList) {
      this.fileList = fileList
      if (response && response.errCode === 0) {
        this.visible = false
        var checkObj = {'stuWorkName': this.stuWorkName, 'workId': this.workId}
        axios.post('http://127.0.0.1:8091/check/stuCheck', checkObj).then(({data}) => {
          if (data.errCode === 0) {
            this.$message({
              message: '查重成功',
              type: 'success'
            })
          } else {
            this.$message.error('查重失败')
          }
        })
      } else {
        this.$message.error(response.msg)
      }
    },
    // 弹窗关闭时
    closeHandle () {
      this.fileList = []
      this.$emit('refreshDataList')
    },
    uploadWork (id) {
      this.visible = true
      this.workId = id
    }
  }
}
</script>

<style scoped>

</style>
